<template>
  <a-row :gutter="10">
    <a-col :span="4">
      <a-affix :offsetTop="100">
        <div class="side-panel">
          <div class="panel-header">
            <div class="header-left">
              <div class="title">必读榜单</div>
              <div class="header-actions">
                <a-input-search
                  v-model="searchText"
                  placeholder="搜索帖子"
                  search-button
                  @search="handleSearch"
                />
                <a-button type="primary" @click="handleCreatePost">
                  <template #icon>
                    <icon-plus />
                  </template>
                  发布帖子
                </a-button>
              </div>
            </div>
          </div>
          <tab-list @tab-value-change="getTabValue" />
        </div>
      </a-affix>
    </a-col>
    <a-col :flex="1">
      <content-list :zone="tabValue" />
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import TabList from '@/views/post/view/components/tab-list.vue';
import ContentList from '@/views/post/view/components/content-list.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { IconPlus } from '@arco-design/web-vue/es/icon';

const router = useRouter();
const searchText = ref('');
const tabValue = ref('');

const getTabValue = (value: string) => {
  tabValue.value = value;
};

const handleSearch = (value: string) => {
  router.push({
    name: 'PostView',
    query: {
      keyword: value
    }
  });
};

const handleCreatePost = () => {
  router.push({
    name: 'CreatePost'
  });
};
</script>

<style scoped lang="less">
.side-panel {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;

  .panel-header {
    padding: 16px;
    background: #27348c;

    .header-left {
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 12px;
      }

      .header-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;

        :deep(.arco-input-search) {
          width: 100%;

          .arco-input-wrapper {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);

            &:hover,
            &:focus-within {
              background-color: rgba(255, 255, 255, 0.15);
              border-color: rgba(255, 255, 255, 0.3);
            }

            .arco-input {
              color: #ffffff;

              &::placeholder {
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }

          .arco-input-search-button {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;

            &:hover {
              background-color: rgba(255, 255, 255, 0.15);
            }
          }
        }

        .arco-btn {
          width: 100%;
          background-color: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;

          &:hover {
            background-color: rgba(255, 255, 255, 0.15);
          }

          .arco-icon {
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>
